<template>
  <div class="order-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="addContent"
        >添加订单</el-button
      >
      <el-button
        type="success"
        icon="el-icon-upload"
        @click="
          () => {
            this.showImportModal = true;
          }
        "
        >导入数据</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :showDetailBtn="true"
        :pagination="pagination"
        @currentPage="goCurrent"
        @delete="del"
        @modify="modify"
        @detail="goDetail"
        @sizeChange="sizeChange"
      >
        <template slot-scope="scopes" slot="info">
          <div class="send-btn">
            <template v-if="scopes.scope.row.deliveryType">
              <div>
                领取方式：{{
                  DeliveryType[scopes.scope.row.deliveryType] || "无"
                }}
              </div>
              <el-link
                @click="showLogistics(scopes.scope.row)"
                type="primary"
                :underline="false"
                v-if="scopes.scope.row.deliveryType == 1"
              >
                查看配送信息
              </el-link>
            </template>
            <template v-else>
              <span style="color: red">未领取</span>
            </template>
          </div>
        </template>
      </Table>
    </el-row>
    <el-dialog title="导入文件数据" :visible.sync="showImportModal">
      <el-upload
        action=""
        accept=".xls,.xlsx"
        class="upload-demo"
        ref="upload"
        :limit="1"
        :auto-upload="false"
        :on-change="fileChange"
        :on-remove="fileRemove"
      >
        <el-button slot="trigger" type="primary">选取文件</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="file"
          :loading="loading"
          type="primary"
          @click="importTplData"
          >{{ loading ? "导入中" : "导入数据" }}</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="配送信息" :visible.sync="show">
      <div>
        <span>收件人姓名：</span>
        <span>{{ curItem.consignee }}</span>
      </div>
      <p>
        <span>收件人电话：</span>
        <span>{{ curItem.consigneePhone }}</span>
      </p>
      <p>
        <span>收件人地址：</span>
        <span>{{
          curItem.province +
            curItem.city +
            curItem.district +
            curItem.address || ""
        }}</span>
      </p>
      <p>
        <span>备注：</span>
        <span>{{ curItem.consigneeRemark || "" }}</span>
      </p>
    </el-dialog>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import { Message } from "element-ui";
import Upload from "@/components/UploadFile";
import Table from "@/components/Table";
import { getList, delItem, importData } from "@/api/order";
import { pagination, page, OrderType, DeliveryType } from "@/utils/enumConfig";

export default {
  name: "Order",
  components: {
    normalFilter,
    Table,
    Upload
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "productName",
          title: "产品名称",
          placeholder: "请输入",
          width: 400
        },
        {
          type: "input",
          id: "customerName",
          title: "客户姓名",
          placeholder: "请输入",
          width: 250
        },
        {
          type: "input",
          id: "customerPhone",
          title: "客户电话",
          placeholder: "请输入",
          width: 250
        },
        {
          type: "input",
          id: "area",
          title: "客户区域",
          placeholder: "请输入",
          width: 250
        },
        {
          type: "input",
          id: "financialManager",
          title: "理财经理",
          placeholder: "请输入",
          width: 250
        },
        {
          type: "date",
          title: "时间"
        },
        {
          type: "select",
          id: "type",
          title: "订单状态",
          placeholder: "请选择",
          options: [
            {
              title: "全部",
              value: ""
            },
            {
              title: "生效中",
              value: "valid"
            },
            {
              title: "已过期",
              value: "expired"
            }
          ]
        }
      ],
      onFilterChange: value => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page
        });
      }
    };
    const columnProps = [
      {
        title: "客户姓名",
        dataIndex: "customerName",
        key: "customerName"
      },
      {
        title: "客户电话",
        dataIndex: "customerPhone",
        key: "customerPhone",
        width: 150
      },
      {
        title: "客户区域",
        dataIndex: "area",
        key: "area"
      },
      {
        title: "客户来源",
        dataIndex: "customerSource",
        key: "customerSource"
      },
      {
        title: "理财经理",
        dataIndex: "financialManager",
        key: "financialManager"
      },
      {
        title: "产品名称",
        dataIndex: "productName",
        key: "productName",
        width: 400,
        align: "left"
      },
      {
        title: "打款时间",
        dataIndex: "payTime",
        key: "payTime",
        width: "180"
      },
      {
        title: "认购金额",
        dataIndex: "buyMoney",
        key: "buyMoney",
        width: "120"
      },
      {
        title: "分期方式",
        dataIndex: "calcType",
        key: "calcType",
        width: "100"
      },
      // {
      //   title: "订单类型",
      //   dataIndex: "status",
      //   key: "status",
      //   render: (record) => {
      //     return `<span>${OrderType[record.status] || ""}</span>`;
      //   },
      // },
      {
        title: "领取信息",
        width: "200",
        key: "info",
        slot: "info"
      }
    ];
    return {
      loading: false,
      showImportModal: false,
      DeliveryType,
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      show: false,
      curItem: {},
      file: null
    };
  },
  async mounted() {},
  async activated() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex
    };
    let { phone, type } = this.$route.query;

    if (phone && type) {
      //设置筛选框的初始值
      let _filterItems = this.filterProps.filterItems;
      _filterItems.forEach(item => {
        if (item.id === "customerPhone") {
          item["defaultValue"] = phone;
        } else if (item.id === "type") {
          item["defaultValue"] = type;
        }
      });
      this.$set(this.filterProps, "filterItems", _filterItems);
      param = {
        ...param,
        current: 1,
        customerPhone: phone,
        type
      };
    }
    this.getList(param);
  },
  methods: {
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    addContent() {
      this.$router.push("/order/add");
    },
    goCurrent(currentIndex) {
      console.log(currentIndex);
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/order/update/${id}` });
    },
    async del({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    },
    async getList(param) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current
      };
      this.tableData = records;
    },
    async importTplData() {
      let _this = this;
      this.loading = true;
      let res = await importData({ file: this.file });
      if (res.code === 1) {
        //成功后清除file
        this.file = null;

        Message({
          message: res.msg,
          type: "success",
          duration: 1 * 1000
        });
        setTimeout(() => {
          //清空已经上传的列表
          this.$refs.upload.clearFiles();

          _this.showImportModal = false;
          _this.getList({
            ..._this.filterParam,
            current: 1
          });
        }, 1000);
      }
      this.loading = false;
    },
    goDetail({ id }) {
      this.$router.push(`/order/detail/${id}`);
    },
    showLogistics(row) {
      console.log(row);
      this.show = true;
      this.curItem = row;
    },
    fileChange(file) {
      this.file = file.raw;
    },
    fileRemove(file) {
      this.file = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.order-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
  .send-btn {
    margin: 10px 0;
  }
}
</style>
